<template>
	<view class="container">
		<view class="safe-area-top" />
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="back-btn" @tap="goBack">
				<text class="icon">←</text>
			</view>
			<text class="title">你的报告</text>
		</view>



		<!-- 阶段任务列表 -->
		<scroll-view scroll-y class="stage-scroll">

			<!-- 用户信息卡片 -->
			<view class="card-info">
				<view class="card-info-title">天造地设的一对</view>
				<view class="percent">{{overall_score}}% 匹配度</view>
				<view class="desc">愿意为对方坚定，共同成长，这才是长久关系的核心</view>
				<view class="chartsMain">
					<!-- 					<e-chart class="chart" :option="option" /> -->
					<!-- 					<v-chart class="chart" :option="option" /> -->
					<canvas canvas-id="radarCanvas" id="radarCanvas" style="width:300px; height: 300px;"></canvas>

				</view>
				<view class="card-desc">
					{{analysis_text}}
				</view>
			</view>
			<view class="advice-info">
				<view class="advice-view">
					<view class="advice-container" v-for="(item,index) in data" :key="index">
						<image class="advice-image" src="/static/info_icon.png" mode=""></image>
						<view class="advice-text">{{item.content}} + {{index}}</view>
					</view>
				</view>
			</view>
			<view class="button-item">
				<button type="default" @click="goBackToPractice">返回练习页面</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'


	var pixelRatio = 1
	const data = ref([80, 80, 80, 80, 80])
	const labels = ref(['hobby_similarity', 'comfort_level', 'future_compatibility', 'values_alignment', 'individual_difference'])
	const chartData = ref({})
	const cWidth = ref(0)
	const cHeight = ref(0)
	const analysis_text = ref('')
	const overall_score = ref(0)
	onLoad((options) => {
		console.log('cqw------progress_id = ' + options.progress_id)
		// progress_id.value = options.id

	})

	onMounted(() => {
		drawRadarChart()
		fetchData()
	})

	function goBack() {
		uni.navigateBack()
	}

	function goBackToPractice() {
		uni.navigateBack({
			delta: 2
		});
	}

	function drawRadarChart() {

		const ctx = uni.createCanvasContext('radarCanvas');
		const width = 100;
		const height = 100;
		const centerX = 150;
		const centerY = 150;
		const colors = ['#cacaca', '#cacaca', '#D6D6D6', '#E6E6E6', '#F6F6F6'];
		const maxScore = 100; // 数据最大值

		const angleStep = (2 * Math.PI) / labels.value.length;

		// 绘制背景多边形
		ctx.setLineWidth(1);
		ctx.setStrokeStyle('#F6F6F6');



		//底部圆盘
		ctx.beginPath();
		ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
		ctx.setFillStyle('#F6F6F6');
		ctx.closePath();
		ctx.fill();


		//多边形圈
		for (let i = 5; i > 0; i--) {
			ctx.setStrokeStyle(colors[i - 1]);
			ctx.setFillStyle(colors[i - 1]);
			ctx.beginPath();
			labels.value.forEach((label, index) => {
				const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
				const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
				if (index === 0) {
					ctx.moveTo(x, y);
				} else {
					ctx.lineTo(x, y);
				}
			});
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
		}

		//竖线
		labels.value.forEach((label, index) => {

			ctx.setStrokeStyle('#EDEDED');
			ctx.setFillStyle('#EDEDED');
			ctx.beginPath();

			const x1 = centerX + (width * 0.6) * Math.sin(angleStep * index);
			const y1 = centerY + (height * 0.6) * Math.cos(angleStep * index);
			const x = centerX + (width) * Math.sin(angleStep * index);
			const y = centerY + (height) * Math.cos(angleStep * index);

			ctx.moveTo(x1, y1);
			ctx.lineTo(x, y);

			ctx.closePath();
			ctx.stroke();

		});



		// 绘制雷达图数据
		ctx.setStrokeStyle('rgba(11,200,200,1)');
		ctx.setFillStyle('rgba(11,200,200, 0.34)');
		ctx.setLineWidth(2);
		ctx.beginPath();
		data.value.forEach((score, index) => {
			const x = centerX + (width * (score / maxScore)) * Math.cos(angleStep * index - Math.PI / 2);
			const y = centerY + (height * (score / maxScore)) * Math.sin(angleStep * index - Math.PI / 2);
			if (index === 0) {
				ctx.moveTo(x, y);
			} else {
				ctx.lineTo(x, y);
			}
		});
		ctx.closePath();
		ctx.fill();
		ctx.stroke();

		// 绘制标签
		ctx.setTextAlign('center');



		labels.value.forEach((label, index) => {
			const x = centerX + (width ) * Math.cos(angleStep * index - Math.PI / 2);
			const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);

			//标题
			ctx.setFillStyle('#000');
			ctx.setFontSize(10);
			ctx.font = '10px sans-serif'
			ctx.fillText(label, x, y);

			ctx.setFillStyle('#A2A4A2');
			ctx.font = '10px sans-serif'
			ctx.setFontSize(10);
			ctx.fillText(data.value[index], x, y + 16);

		});

		ctx.draw();

		//转图片

		uni.canvasToTempFilePath({
			x: 0,
			y: 0,
			width: 420,
			height: 420,
			destWidth: 840,
			destHeight: 840,
			canvasId: 'radarCanvas',
			success: (res) => {
				// 在H5平台下，tempFilePath 为 base64
				// 	this.src = res.tempFilePath;
			}
		})
	}
	// 模拟请求数据
	async function fetchData() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		try {
			const url = `https://test.r.ads.sohu.com/api/v1/game/scene-summary`;
			console.log('cqw url = ' + url)
			const res = await uni.request({
				url: url,
				method: 'POST',
				data: {
					user_progress_id: 1,
				},
			});
			console.info('fetchData 请求完成', res);
			console.info('res.data =', res.data);
			
			console.info('res.data.radar_data =', res.data.data.radar_data);
			
			data.value[0] = res.data.data.radar_data["hobby_similarity"]
			data.value[1] = res.data.data.radar_data["comfort_level"]
			data.value[2] = res.data.data.radar_data["future_compatibility"]
			data.value[3] = res.data.data.radar_data["values_alignment"]
			data.value[4] = res.data.data.radar_data["individual_difference"]
			analysis_text.value = res.data.data.analysis_text
			overall_score.value = res.data.data.overall_score
			drawRadarChart()

		} catch (err) {
			console.error('fetchData 请求失败:', err);
		} finally {
			uni.hideLoading(); // 无论成功或失败都隐藏 loading
		}

	}
</script>

<style lang="scss" scoped>
	.safe-area-top {
		/* padding-top: env(safe-area-inset-top); */
		height: 50px;
	}

	.custom-nav {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		padding: 0 15px;
	}

	.back-btn {
		display: flex;
		align-items: center;
	}

	.icon {
		font-size: 20px;
		color: #000;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 17px;
		font-weight: bold;
		margin-top: 10px;
		padding: 10px 10px 10px 10px;
	}

	.stage-scroll {
		background-color: #f9fafb;
	}

	.card-info {
		margin: 10px;
		background-color: #ffffff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.card-info-title {
		font-size: 18px;
		font-weight: bold;
		color: #ff69b4;
		margin-bottom: 10px;
	}

	.percent {
		font-size: 24px;
		font-weight: bold;
		color: #ff69b4;
		margin-bottom: 12px;
	}

	.desc {
		font-size: 14px;
		color: #666;
		text-align: center;
		line-height: 1.6;
	}

	.card-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10px;
	}

	// .chartsMain {
	// 	// width: 750rpx;
	// 	height: 450rpx;
	// 	padding-top: 15rpx;
	// 	background: #fff;
	// 	margin-bottom: 24rpx;
	// 	border-top: 2rpx solid #f2f2f2;
	// 	.chart {
	// 		height: 400px;
	// 	}
	// }

	.radarCanvas {
		height: 450px;
		padding-top: 15px;
		background: #fff;
		margin-bottom: 24px;
		border-top: 2px solid #f2f2f2;
	}
	.advice-view {
		padding: 5px;
	}

	.advice-container {
		display: flex; //定义父元素为flex；
		flex-direction: row; //表示横向布局
		margin-bottom: 5px;
		margin: 10px,10px,10px,10px;
	// 	padding: 10rpx,10rpx,10rpx,10rpx;
	}

	.advice-info {
		flex-direction: column;
		margin: 10px;
		background-color: #ffffff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	}

	.advice-image {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		margin-right: 10px;
	}

	.advice-text {
		font-size: 14px;
		color: #666;
		line-height: 1.4;
	}

	button {
		background-color: pink;
		// color: #fff;
		/* 其他样式自定义，比如圆角等 */
		border-radius: 20px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 40px;
		height: 40px;
		text-decoration-color: white;
	}
</style>